<template>
  <view class="page">
    <!-- 顶部渐变区域（完全匹配目标样式） -->
    <view class="page-gradient">
		
      <!-- 用户信息区 -->
      <view class="row-center">
        <!-- 头像按钮（匹配 avatar-btn 样式） -->
        <button class="avatar-btn" open-type="chooseAvatar" @chooseavatar="setHead">
          <image class="avatar" :src="userAvatar" mode="aspectFill"></image>
        </button>
      </view>

      <!-- 用户名（匹配 info-font 样式） -->
      <view class="row-center info-font">{{ userName }}</view>

      <!-- 统计信息行（修复后） -->
		<view class="row-center" style="margin-top: 15px; width: 80%;">
		  <!-- 左侧：累计积分（对应原 van-col span="12"） -->
		  <view class="row-center" style="width: 50%; flex-direction: column;">
			<text v-if="pointSum >= 0" class="info-font positive">+{{ pointSum }}</text>
			<text v-else class="info-font negative">{{ pointSum }}</text>
			<text class="des-font" @click="showHistory" style="text-decoration: underline;">累计积分></text>
		  </view>
		  <!-- 右侧：总场次（对应原 van-col span="12"） -->
		  <view class="row-center" style="width: 50%; flex-direction: column;">
			<text class="info-font">{{ usagesCount }}</text>
			<text class="des-font">总场次</text>
		  </view>
		</view>
	  
	  
	  
    </view>

    <!-- 设置选项区域 -->
    <view style="padding: 20rpx 30rpx;">
      <!-- 头像/昵称设置组（匹配 round-top/round-bottom 样式） -->
      <view class="setting-group round-top">
        <!-- 头像设置项 -->
        <view class="setting-item">
          <view class="setting-left">
            <text class="setting-icon">👤</text>
            <text class="setting-title">头像</text>
          </view>
          <view class="setting-right">
            <button class="avatar-btn" open-type="chooseAvatar" @chooseavatar="setHead" style="width: 60px; height: 45px; border: 1px solid #fff; border-radius: 8px;">
              <image class="avatar" :src="userAvatar" mode="aspectFill" style="width: 30px; height: 30px; margin-top: 0;"></image>
            </button>
            <text class="arrow">></text>
          </view>
        </view>
        
        <!-- 昵称设置项（匹配 input-style 样式） -->
        <view class="setting-item">
          <view class="setting-left">
            <text class="setting-icon">📝</text>
            <text class="setting-title">昵称</text>
          </view>
          <view class="setting-right">
            <input 
              class="input-style" 
              placeholder="请输入昵称" 
              type="nickname" 
              :value="userName" 
              @blur="setName" 
              style="min-width: 120px;"
            />
            <text class="arrow">></text>
          </view>
        </view>
      </view>

      <!-- 清除历史数据组 -->
      <view class="setting-group" >
        <view class="setting-item">
          <view class="setting-left">
            <text class="setting-icon">🗑️</text>
            <text class="setting-title">清除历史数据</text>
          </view>
          <view class="setting-right">
            <text class="arrow">></text>
          </view>
        </view>
      </view>

      <!-- 免责声明组（匹配 round-bottom 样式） -->
      <view class="setting-group round-bottom">
        <view class="setting-item" @click="showDisclaimer">
          <view class="setting-left">
            <text class="setting-icon">⚠️</text>
            <text class="setting-title">免责声明</text>
          </view>
          <view class="setting-right">
            <text class="arrow">></text>
          </view>
        </view>
      </view>
    </view>

    <!-- 免责声明弹窗 -->
    <uni-popup ref="disclaimerPopup" type="bottom" :mask-click="false">
      <view class="disclaimer-container">
        <view class="disclaimer-header">
          <text class="disclaimer-title">免责声明</text>
          <button class="close-btn" @click="closeDisclaimer">关闭</button>
        </view>
        
        <view class="disclaimer-content">
          <view class="disclaimer-section">
            <text class="section-title">1.信息收集与使用</text>
            <text class="section-content">
              本小程序不要求用户授权任何权限,不会后台收集用户的任何信息,对于用户上传的的头像,昵称经腾讯安全校验后保存在开发者服务器中,开发者不对此信息提供保密,保管义务,如果介意可使用系统提供的默认头像昵称,程序使用过程中产生的数据归开发者所有。
            </text>
          </view>
          
          <view class="disclaimer-section">
            <text class="section-title">2.使用限制</text>
            <text class="section-content">
              本小程序仅供学习娱乐使用,请勿用于非法活动,由此产生的后果,开发者概不负责。
            </text>
          </view>
          
          <view class="contact-section">
            <text class="contact-text">如有问题请联系</text>
            <text class="contact-email" @click="copyEmail">admin@xtyu.top</text>
          </view>
        </view>
      </view>
    </uni-popup>

    <!-- 历史记录弹窗 -->
    <uni-popup ref="historyPopup" type="bottom" :mask-click="false">
      <view class="history-container">
        <view class="history-header">
          <text class="history-title">历史记录</text>
          <button class="close-btn" @click="closeHistory">关闭</button>
        </view>
        
        <!-- 无数据提示 -->
        <view v-if="userHistoryInfoDetails.length === 0" class="empty-history">
          <text>暂无历史记录</text>
        </view>
        
        <!-- 历史记录列表（匹配 image-container 样式） -->
        <scroll-view v-else class="history-list" scroll-y>
          <view 
            v-for="(room, index) in userHistoryInfoDetails" 
            :key="index"
            class="history-item"
          >
            <view class="history-room-info">
              <view style="display: flex; align-items: center;">
                <image class="image-container" :src="room.mUserAvatar || userAvatar" mode="aspectFill"></image>
                <text class="room-owner">{{ room.mUserName }}的房间</text>
              </view>
              <text class="room-time">{{ room.createTime }}</text>
            </view>
            <view class="history-score">
              <text v-if="room.mUserPoint >= 0" class="score-positive">+{{ room.mUserPoint }}</text>
              <text v-else class="score-negative">{{ room.mUserPoint }}</text>
            </view>
          </view>
        </scroll-view>
      </view>
    </uni-popup>

    <!-- 返回按钮（匹配 exit-icon 样式） -->
    <view class="exit-icon" @click="toLast">
      <text class="exit-text">返回</text>
    </view>
  </view>
</template>

<script>
import { ref, onMounted } from 'vue'

export default {
  setup() {
    // 状态定义（保留原逻辑）
    const pointSum = ref(0)
    const usagesCount = ref(0)
    const userAvatar = ref('https://picsum.photos/200/200') // 默认头像
    const userName = ref('未知用户')
    const userHistoryInfoDetails = ref([])
    
    // 弹窗引用
    const disclaimerPopup = ref(null)
    const historyPopup = ref(null)

    // 初始化（模拟数据，保留原try-catch结构）
    const init = async () => {
      try {
        // 模拟接口返回数据
        pointSum.value = 1850
        usagesCount.value = 12
        userName.value = "玩家456"
        // 模拟历史记录数据
        userHistoryInfoDetails.value = [
          { mUserName: "玩家123", mUserAvatar: "https://picsum.photos/201/201", createTime: "2024-05-20 15:30", mUserPoint: 320 },
          { mUserName: "玩家789", mUserAvatar: "https://picsum.photos/202/202", createTime: "2024-05-18 10:15", mUserPoint: -80 },
          { mUserName: "玩家456", mUserAvatar: "https://picsum.photos/203/203", createTime: "2024-05-15 19:40", mUserPoint: 550 }
        ]
        console.log("初始化完成")
      } catch (error) {
        console.error('获取用户历史信息失败:', error)
      }
    }

    // 返回上一页（保留原逻辑）
    const toLast = () => {
      uni.navigateBack()
    }

    // 显示免责声明（保留原逻辑）
    const showDisclaimer = () => {
      disclaimerPopup.value.open()
    }

    // 关闭免责声明（保留原逻辑）
    const closeDisclaimer = () => {
      disclaimerPopup.value.close()
    }

    // 复制邮箱（保留原逻辑）
    const copyEmail = () => {
      uni.setClipboardData({
        data: 'admin@xtyu.top',
        success: () => {
          uni.showToast({
            title: '邮箱已复制',
            icon: 'success'
          })
        }
      })
    }

    // 显示历史记录（保留原逻辑）
    const showHistory = async () => {
      try {
        // 若需加载最新数据，可在此处添加接口调用
        historyPopup.value.open()
        console.log("显示历史记录")
      } catch (error) {
        console.error('获取历史详情失败:', error)
      }
    }

    // 关闭历史记录（保留原逻辑）
    const closeHistory = () => {
      historyPopup.value.close()
    }

    // 设置头像（保留原逻辑）
    const setHead = async (e) => {
      try {
        if (e.detail.avatarUrl) {
          userAvatar.value = e.detail.avatarUrl
          uni.showToast({
            title: '头像设置成功',
            icon: 'success'
          })
          console.log("头像已更新")
        }
      } catch (error) {
        console.error('设置头像失败:', error)
        uni.showToast({
          title: '头像设置失败',
          icon: 'none'
        })
      }
    }

    // 设置昵称（保留原逻辑）
    const setName = async (e) => {
      try {
        const newName = e.detail.value.trim()
        if (newName) {
          userName.value = newName
          uni.showToast({
            title: '昵称设置成功',
            icon: 'success'
          })
          console.log("昵称已更新为:", newName)
        }
      } catch (error) {
        console.error('设置昵称失败:', error)
        uni.showToast({
          title: '昵称设置失败',
          icon: 'none'
        })
      }
    }

    // 清除历史数据（保留原逻辑）
    const cleanHistoryData = () => {
      uni.showModal({
        title: '温馨提示',
        content: '该操作会清空所有历史对局数据，但会保留正在进行中的对局数据，确定要清除吗？',
        success: async (res) => {
          if (res.confirm) {
            try {
              userHistoryInfoDetails.value = []
              pointSum.value = 0
              usagesCount.value = 0
              uni.showToast({
                title: '历史数据已清除',
                icon: 'success'
              })
              console.log("历史数据已清除")
            } catch (error) {
              console.error('清除历史数据失败:', error)
              uni.showToast({
                title: '清除失败',
                icon: 'none'
              })
            }
          }
        }
      })
    }

    // 页面挂载时初始化
    onMounted(() => {
      init()
    })

    return {
      pointSum,
      usagesCount,
      userAvatar,
      userName,
      userHistoryInfoDetails,
      disclaimerPopup,
      historyPopup,
      init,
      toLast,
      showDisclaimer,
      closeDisclaimer,
      copyEmail,
      showHistory,
      closeHistory,
      setHead,
      setName,
      cleanHistoryData
    }
  }
}
</script>

<style scoped>
/* 引入目标样式（完全保留，无修改） */
.page {
  background-color: #e6f2e6;
/*  background-color: #f2f2f2; */
}

.page-gradient {
  background: linear-gradient(to bottom, #c1f5ca, #f2f2f2);
  background: linear-gradient(to bottom, #89c1f5, #f2f2f2);
  padding-top: 20%;
  /* height: 270px; */
  height: 170px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.exit-icon {
  position: absolute;
  top: 10%;
  left: 7%;
}

.row-center {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
}

.avatar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  background-color: transparent;
  border: none;
  outline: none;
  position: relative;
  border-radius: 50%;
  border: 1px solid #ffffff;
}

.avatar {
  margin-top: 23%;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.info-font {
  font-size: 20px;
  font-weight: bold;
  margin-top: 8px;
  color: rgb(36, 36, 35);
}

.des-font {
  color: silver;
  font-size: 14px;
  margin-top: 4px;
}

.image-container {
  width: 70rpx;
  height: 70rpx;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.5);
  margin-right: 6%;
}

.input-style {
  border: none; /* 去掉边框 */
  outline: none; /* 去掉选中时的边框 */
  background-color: transparent; /* 设置背景色为透明 */
  text-align: right; /* 文字右对齐 */
  font-size: 16px; /* 字体大小 */
}

.round-top{
  border-top-left-radius: 18px; /* 左上角圆角 */
  border-top-right-radius: 18px; /* 右上角圆角 */
}

.round-bottom{
  border-bottom-left-radius: 18px; /* 左下角直角 */
  border-bottom-right-radius: 18px; /* 右下角直角 */
}

.avatar-list {
  display: flex;
  overflow: hidden;
  justify-content: flex-end; 
}

.hidden-text{
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1; 
  -webkit-box-orient: vertical;
  width: 80px;
}

/* 补充功能样式（不冲突目标样式，仅适配功能展示） */
.exit-text {
  color: white;
  font-size: 14px;
  background: rgba(255, 255, 255, 0.2);
  padding: 8px 16px;
  border-radius: 20px;
}

.setting-group {
  background: white;
  overflow: hidden;
  margin-bottom: 20px; /* 新增：每个group下方固定20px间距，避免拥挤 */
}

.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #f0f0f0;
}

.setting-item:last-child {
  border-bottom: none;
}

.setting-left {
  display: flex;
  align-items: center;
  gap: 15px;
}

.setting-icon {
  font-size: 20px;
}

.setting-title {
  font-size: 16px;
  color: #333;
}

.setting-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.arrow {
  color: #ccc;
  font-size: 18px;
}

/* 弹窗样式（保留原功能样式） */
.disclaimer-container, .history-container {
  background: white;
  padding: 20px;
  border-radius: 20px 20px 0 0;
  max-height: 70vh;
}

.disclaimer-header, .history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f0f0f0;
}

.disclaimer-title, .history-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.close-btn {
  background: #f0f0f0;
  color: #666;
  border: none;
  border-radius: 15px;
  padding: 8px 16px;
  font-size: 14px;
}

.disclaimer-content {
  max-height: 400px;
  overflow-y: auto;
}

.disclaimer-section {
  margin-bottom: 20px;
}

.section-title {
  display: block;
  font-size: 17px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #333;
}

.section-content {
  display: block;
  font-size: 15px;
  color: #666;
  line-height: 1.5;
}

.contact-section {
  margin-top: 20px;
  text-align: center;
}

.contact-text {
  font-size: 15px;
  color: #666;
}

.contact-email {
  color: rgb(20, 66, 196);
  font-weight: bold;
  text-decoration: underline;
  margin-left: 5px;
}

.empty-history {
  text-align: center;
  padding: 60px 20px;
  color: #999;
}

.history-list {
  max-height: 400px;
}

.history-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid #f0f0f0;
}

.history-item:last-child {
  border-bottom: none;
}

.history-room-info {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.room-owner {
  font-weight: bold;
  font-size: 16px;
  color: #000;
}

.room-time {
  color: #bdbdbd;
  font-size: 14px;
}

.history-score {
  padding-right: 8%;
}

.score-positive {
  color: rgb(233, 25, 25);
  font-weight: bold;
  font-size: 16px;
}

.score-negative {
  color: green;
  font-weight: bold;
  font-size: 16px;
}

.stat-value {
  font-size: 16px;
  font-weight: bold;
}

.stat-value.positive {
  color: rgb(233, 25, 25);
}

.stat-value.negative {
  color: green;
}

.stat-label {
  font-size: 14px;
  color: #666;
  text-decoration: underline;
  margin-left: 5px;
}
</style>